﻿<link href="Content/layui/css/layui.css" rel="stylesheet" />
<div class="main" style="padding:10px;">
    <div class="container">
        <div class="main-content">
                <div>
                    <div class="layui-form layui-form-pane">
                        <div class="layui-form-item" style="margin-bottom:0">
                            <div class="layui-inline">
                                <div class="layui-form-mid">从</div>
                                <div class="layui-input-inline">
                                    <input type="text" name="startDate" id="startDate" lay-verify="required" autocomplete="off"   class="layui-input">
                                </div>
                                <div class="layui-form-mid">到</div>
                                <div class="layui-input-inline">
                                    <input type="text" name="startDate" id="endDate" autocomplete="off" class="layui-input">
                                </div>
                                <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="seach" id="query" data-type="reload" style="margin-top:5px">查询</button>
                            </div>
                        </div>
                        <table id="goods-list"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="Content/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'jquery', 'table', 'element', 'layer', 'laydate'], function () {
        //初始化数据
        var form = layui.form, $ = layui.$, laydate = layui.laydate, table = layui.table;
        laydate.render({
            elem:'#startDate'
        });
        laydate.render({
            elem:'#endDate'
        })
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        //第一个实例
        table.render({
            elem: '#goods-list'
            , height:400
            , url: '/buytop.ashx' //数据接口
            , toolbar: '#toolbarDemo'
            , page: true //开启分页
            , cols: [[ //表头
                //{ type: 'radio' }
                , { field: 'id', title: '编号',sort: true }
                , { field: 'name', title: '名称'}
                , { field: 'quantity', title: '数量',sort: true }
                , { field: 'price', title: '单价'}
                , { field: 'sum', title: '金额'}
                , { field: 'grossProfit', title: '毛利'}
            ]]
            ,id:'table-buytop'

        });
        var grid = {
            reload: function () {
                var _startDate = $('#startDate').val();
                var _endDate = $('#endDate').val();
                console.info(_startDate);
                //执行重载
                table.reload('table-buytop', {
                    page: {
                        curr:1
                    }
                    //参数
                    , where: {
                        startDate: _startDate,
                        endDate: _endDate
                    }
                });
            }
        }
        //查询事件
        $("#query").on('click', function () {
            var type = $(this).data('type');
            console.info("#query type is" + type);
            grid[type] ? grid[type].call(this) : '';
        })
    });
</script>
